<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚服务-服务列表</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">
</head>

<body>
    <div class="app-wrap" v-cloak id="jfw_list">
        <header-top :loginname="loginName"></header-top>
        <header-search-global type="服务" ></header-search-global>
        <common-top-nav cur="聚服务"></common-top-nav>
        <div class="bg-gray">
            <div class="container">
                <common-crumb :crumblist="crumblist"></common-crumb>
                <!-- 筛选 -->
                <div class="jfuwu-condition">
                    <div class="ordertype">
                        <span>订单类型：</span>
                        <a href="javascript:void(0)" @click="getListByType(type.val)" v-for="type in ordertype" :class="{'active':typeId==type.val}">{{type.txt}}</a>
                    </div>
                    <div class="fenlei">
                        <div>
                            <select class="fl-item" v-model="areaId" @change="getListByArea()">
                                <option value="0">区域</option>
                                <option v-for="area in areaList" :value="area.number">{{area.name}}</option>
                            </select>

                            <!--<span class="fl-item">区域<i class="icon-arr-down"></i></span>-->
                        </div>
                        <div>
                            <!--<span class="fl-item">分类<i class="icon-arr-down"></i></span>-->
                            <select class="fl-item" v-model="typeId" @change="getListByType()">
                                <option value="0">分类</option>
                                <option v-for="type in typeList" :value="type.number">{{type.name}}</option>
                            </select>
                        </div>
                        <!--<div>
                            <span class="fl-item">默认排序<i class="icon-arr-down"></i></span>
                        </div>-->
                        <div class="list-page">
                            <span class="page-num">1/100</span>
                            <span class="arr-wrap disabled"><i class="icon-arr-left"></i></span>
                            <span class="arr-wrap"><i class="icon-arr-right"></i></span>
                        </div>
                    </div>
                </div>

                <!-- 列表数据 -->
                <div class="jfuwu-list">
                    <div v-for="item in list" class="jfuwu-item" v-if="list && list.length>0">
                        <!--<p class="line1" v-for="aa,index in item.attachmentList" v-if="index<1">服务类型{{aa.id}}</p>-->
                        <img :src="item.attachmentList[0].fileUrl" v-if="item.attachmentList && item.attachmentList.length>0">
                        <div class="jfuwu-bottom">
                            <div class="jfuwu-info">
                                <p class="title">{{item.title}}</p>
                                <div class="detail">
                                    <div>
                                        <p class="line1">服务类型</p>
                                        <p class="line2">{{item.categoryName}}</p>
                                    </div>
                                    <div>
                                        <p class="line1">地区要求</p>
                                        <p class="line2">{{item.areaName}}</p>
                                    </div>
                                    <div>
                                        <p class="line1">发布日期</p>
                                        <p class="line2">{{item.createDate | date}}</p>
                                    </div>
                                </div>
                            </div>
                            <a  class="baojia" :href="'../jfuwu/baojia.html?'+item.id">马上报价</a>
                        </div>
                    </div>
                </div>
                <!-- 分页 -->
                <common-page :current="pageNo" :all="total" @btn-click="listen"></common-page>
            </div>
        </div>
        <common-footer></common-footer>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        jfw_list();
    </script>
</body>

</html>